<template>
  <div class="settings-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form ref="form" :model="user" label-width="100px">
            <el-form-item label="编号">
              {{ user.id }}
            </el-form-item>
            <el-form-item label="手机">
              {{ user.mobile }}
            </el-form-item>
            <el-form-item label="管理员名称">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="管理员介绍">
              <el-input type="textarea" v-model="user.intro"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="updateProfileLoading"
                type="primary"
                @click="onUpdateUser"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" :offset="4">
          <label for="file" style="cursor: pointer">
            <el-avatar
              shape="square"
              :size="150"
              fit="cover"
              :src="user.photo"
            ></el-avatar>
          </label>
          <p style="cursor: pointer" @click="$refs.file.click()">
            点击修改头像
          </p>
          <input
            id="file"
            type="file"
            hidden
            ref="file"
            @change="onFileChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      title="修改头像"
      :visible.sync="dialogVisible"
      append-to-body
      @opened="onDialogOpened"
      @closed="onDialogClosed"
    >
      <div class="preview-image-wrap">
        <img class="preview-image" :src="perviewImage" ref="preview-image" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :loading="updatePhotoLoading"
          type="primary"
          @click="onUpdatePhoto"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { DB } from "@/utils";
import globalBus from "@/utils/global-bus";
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";
import { userInfo } from "@/config";
const userDetail = new DB("userDetail");

export default {
  name: "SettingsIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {},
      dialogVisible: false, // 控制上传图片裁切预览的显示状态
      perviewImage: "", // 预览图片
      cropper: null, // 裁切器示例
      updatePhotoLoading: false, // 更新用户头像的 loading 状态
      updateProfileLoading: false, // 更新基本信息的 loading 状态
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
      if(userDetail._get(userDetail) && userDetail._get(userDetail).length !=0) {
          this.user=userDetail._get(userDetail)
      }else {
          this.user = userInfo
      }
  },
  methods: {
    onUpdateUser() {
      this.updateProfileLoading = true;
      const { email, intro, name } = this.user;
      setTimeout(() => {
        userDetail._set(this.user);
        this.updateProfileLoading = false;
        // 更新顶部登录用户的信息
        globalBus.$emit("update-user", this.user);
        this.$message.success("保存成功");
      }, 1000);
    },

    onFileChange() {
      const file = this.$refs.file;

      const blobData = window.URL.createObjectURL(file.files[0]);

      this.perviewImage = blobData;

      this.dialogVisible = true;
      // 解决选择相同文件不触发 change 事件的问题
      this.$refs.file.value = "";
    },
    onDialogOpened() {
      const image = this.$refs["preview-image"];
      if (this.cropper) {
        this.cropper.replace(this.perviewImage);
        return;
      }
      // 初始化裁切器
      this.cropper = new Cropper(image, {
        aspectRatio: 1, // 1 / 1 裁切比例 16 / 9
        viewMode: 1, // 无法裁切图片外部
        dragMode: "none", // 无法移动画布
        cropBoxResizable: false,
      });
    },
    onDialogClosed() {
      // 方法二 销毁裁切器 重新初始化 性能消耗较大
      // this.cropper.destroy()
    },
    onUpdatePhoto() {
      // 让确定按钮开始 loading
      this.updatePhotoLoading = true;
      // 获取裁切的图片对象
      this.cropper.getCroppedCanvas().toBlob((file) => {
        const fd = new FormData();
        fd.append("photo", file);
        this.dialogVisible = false;
        this.user.photo = window.URL.createObjectURL(file);
        this.updatePhotoLoading = false;
        userDetail._set(this.user);
        this.$message({
          type: "success",
          message: "更新头像成功",
        });
        // 更新顶部登录用户的信息
        globalBus.$emit("update-user", this.user);
      });
    },
  },
};
</script>

<style scoped lang="less">
.preview-image-wrap {
  .preview-image {
    display: block;
    max-width: 100%;
    height: 200px;
  }
}
</style>
